 <!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="BI system demo">
    <meta name="author" content="Louis">

    <script src="http://172.16.17.100:8081/jquery-3.3.1.min.js"></script>
    <!-- Echart -->
    <script type="text/javascript" src="http://172.16.17.100:8081/echarts.min.js" charset="utf-8"></script>
    <!-- inmap API -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SLZA3imFgbUOtquvTeGjSeuehZ1IgTWa"></script>
    <script type="text/javascript" src="https://unpkg.com/inmap@2.0.2/dist/inmap.min.js"></script>


    <title>测试</title>

    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 100%;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>

</head>

<body>
    <div id="allmap"></div>



<script type="text/javascript">
  var inmap = new inMap.Map({
        id: 'allmap',
        skin: "Blueness",
        center: [113.124845, 23.013556],
        zoom: {
            value: 11,
            show: true,
            max: 16,
            min: 8
        },
    });

    var bmap = inmap.getMap();//返回百度地图实例


    var  mapStyle ={style:'midnight'}

    bmap.setMapStyle(mapStyle)
    madeBoundary()

    var getDataURL  = "/get_vote/"+{{page}}+"/"
    //获取数据
    $.ajax({
        url: getDataURL,
        useDefaultXhrHeader: false, //important, otherwise its not working
        type: "GET",
        dataType: 'text',
        success: function(response, opts) {
            var data = JSON.parse(response)
            var overlay = new inMap.PointOverlay({
                    style: {
                     normal: {
                       backgroundColor: "lightyellow", // 填充颜色
                       //shadowColor: "rgba(255, 255, 255, 1)", // 投影颜色
                       //shadowBlur: 35, // 投影模糊级数
                       globalCompositeOperation: "lighter", // 颜色叠加方式
                       size: 4 // 半径
                     },
                   },
                   data: data['items']
                 });

            inmap.add(overlay);

            var overlay = new inMap.LabelOverlay({
                tooltip: {
                    show: true,
                    formatter: function(params) {
                       return (
                         '<div>' +

                         ' <div>' +
                         ' <span>编号：</span><span>' +
                         params.id +
                         '</span>' +
                         ' </div>' +

                         ' <div>' +
                         ' <span>' +
                         params.title +
                         '</span>' +
                         ' </div>' +

                         ' <div>' +
                         ' <span>票数：</span><span>' +
                         params.count +
                         '</span>' +
                         ' </div>' +

                        '</div>'
                       );
                    },
                    offsets: {
                        top: 5,
                        left: 12,
                    }
                },
                style: {
                    normal: {
                        font: '18px Arial',
                        color: 'rgba(255, 80, 50, 1)',
                        //shadowColor: 'rgba(255, 250, 50, 1)',
                        //shadowBlur: 10
                     },
                    mouseOver: {
                        color: 'rgba(255, 250, 255, 1)',
                    },
                    selected: {
                        color: 'rgba(184,0,0,1)'
                    },
                    label:{
                        show:true,
                        //formatter: "'票数：'+{count}",
                    }
                },
                data: data['items'],
                event: {
                    onMouseClick: function (item, event) {
                        console.log(item);
                        //能获取当前点的信息
                    }
                }
            });
            inmap.add(overlay);

        }
    })

    //区域图
    function madeBoundary() {

    var datas = new Array(
            "佛山市南海-#665599",
            "佛山市三水-#559955",
            "佛山市禅城-#449955",
            "佛山市高明-#552255",
            "佛山市顺德-#765255"
        );
        var bdary = new BMap.Boundary();
        for(var i=0;i<datas.length;i++){
        getBoundary(datas[i],bdary);

        }

    }

    function getBoundary(data,bdary){
      data = data.split("-");
        bdary.get(data[0], function(rs){       //获取行政区域
            var count = rs.boundaries.length; //行政区域的点有多少个


              var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000",fillOpacity:0.5,fillColor:data[1]}); //建立多边形覆盖物

                bmap.addOverlay(ply);  //添加覆盖物


            }
        })
    }
</script>

</body>